<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ user.username }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <router-link :to="{'name': '用户课程'}">
            <el-button :type="primary('用户课程')">用户课程</el-button>
          </router-link>
          <router-link
            v-show="['Teacher', 'Agent', 'Admin'].includes(user.usertype)"
            :to="{'name': '用户教师课件'}"
          >
            <el-button :type="primary('用户教师课件')">用户教师课件</el-button>
          </router-link>
          <router-link
            v-show="[ 'Agent', 'Admin'].includes(user.usertype)"
            :to="{'name': '用户代理商课程包'}"
          >
            <el-button :type="primary('用户代理商课程包')">用户代理商课程包</el-button>
          </router-link>
          <router-link v-show="['Admin'].includes(user.usertype)" :to="{'name': '子用户管理'}">
            <el-button :type="primary('子用户管理')">子用户管理</el-button>
          </router-link>
        </el-button-group>
      </div>
    </a-layout-header>
    <router-view v-bind="{userid}"></router-view>
  </a-layout>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "watchuser",
  props: ["userid"],
  computed: {
    ...mapGetters(["getUser"]),
    user() {
      return this.getUser.find(v => v.userid == this.userid);
    }
  },
  methods: {
    primary(name) {
      return this.$route.name == name ? "primary" : "info";
    }
  }
};
</script>


